<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskTrack - 需求管理系统</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/components.css">
</head>
<body>
    <div id="app">
        <!-- 登录页面 -->
        <div id="login-page" class="login-page active">
            <div class="login-container">
                <div class="login-header">
                    <h1>📋 TaskTrack</h1>
                    <p>需求管理系统</p>
                </div>
                <form id="login-form" class="login-form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" name="username" required placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password" required placeholder="请输入密码">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">登录</button>
                    <div class="login-hint">
                        <small>默认管理员账号：admin / zxc123456</small>
                    </div>
                </form>
            </div>
        </div>

        <!-- 主应用页面 -->
        <div id="main-app" class="main-app">
            <!-- 顶部导航 -->
            <header class="header">
                <div class="header-content">
                    <div class="logo">
                        <h1>📋 TaskTrack</h1>
                        <span class="subtitle">需求管理系统</span>
                    </div>
                    <nav class="nav-tabs">
                        <button class="nav-tab active" data-tab="dashboard">📊 需求看板</button>
                        <button class="nav-tab" data-tab="workflows">⚙️ 流程配置</button>
                        <button class="nav-tab" data-tab="users">👥 用户管理</button>
                        <button class="nav-tab" data-tab="settings">🔧 系统设置</button>
                    </nav>
                    <div class="header-actions">
                        <button id="sync-btn" class="btn btn-primary">
                            <span class="sync-icon">🔄</span>
                            同步数据
                        </button>
                        <div class="connection-status" id="connection-status">
                            <span class="status-dot offline"></span>
                            <span class="status-text">离线</span>
                        </div>
                        <div class="user-info">
                            <span id="current-user">管理员</span>
                            <button class="btn btn-secondary" id="logout-btn">退出</button>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 主内容区域 -->
            <main class="main-content">
                <!-- 需求看板 -->
                <section id="dashboard-tab" class="tab-content active">
                    <div class="dashboard-header">
                        <h2>需求看板</h2>
                        <div class="dashboard-filters">
                            <select id="filter-type" class="filter-select">
                                <option value="">所有类型</option>
                            </select>
                            <select id="filter-urgency" class="filter-select">
                                <option value="">所有紧急度</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="kanban-board">
                        <div class="kanban-column" data-status="pending">
                            <div class="kanban-header">
                                <h3>📋 待处理</h3>
                                <span class="task-count" id="count-pending">0</span>
                                <button class="btn btn-sm btn-primary add-task-btn" data-status="pending">+ 添加任务</button>
                            </div>
                            <div class="kanban-tasks" id="tasks-pending">
                                <!-- 动态生成任务卡片 -->
                            </div>
                        </div>
                        
                        <div class="kanban-column" data-status="in_progress">
                            <div class="kanban-header">
                                <h3>🔄 进行中</h3>
                                <span class="task-count" id="count-in_progress">0</span>
                                <button class="btn btn-sm btn-primary add-task-btn" data-status="in_progress">+ 添加任务</button>
                            </div>
                            <div class="kanban-tasks" id="tasks-in_progress">
                                <!-- 动态生成任务卡片 -->
                            </div>
                        </div>
                        
                        <div class="kanban-column" data-status="completed">
                            <div class="kanban-header">
                                <h3>✅ 已完成</h3>
                                <span class="task-count" id="count-completed">0</span>
                                <button class="btn btn-sm btn-primary add-task-btn" data-status="completed">+ 添加任务</button>
                            </div>
                            <div class="kanban-tasks" id="tasks-completed">
                                <!-- 动态生成任务卡片 -->
                            </div>
                        </div>
                        
                        <div class="kanban-column" data-status="rejected">
                            <div class="kanban-header">
                                <h3>❌ 已拒绝</h3>
                                <span class="task-count" id="count-rejected">0</span>
                                <button class="btn btn-sm btn-primary add-task-btn" data-status="rejected">+ 添加任务</button>
                            </div>
                            <div class="kanban-tasks" id="tasks-rejected">
                                <!-- 动态生成任务卡片 -->
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 流程配置 -->
                <section id="workflows-tab" class="tab-content">
                    <div class="workflows-container">
                        <div class="workflows-header">
                            <h2>流程配置管理</h2>
                            <button class="btn btn-primary" id="add-workflow-btn">
                                ➕ 添加流程模板
                            </button>
                        </div>
                        
                        <div class="workflows-list" id="workflows-list">
                            <!-- 流程模板列表将在这里显示 -->
                        </div>
                    </div>
                </section>

                <!-- 用户管理 -->
                <section id="users-tab" class="tab-content">
                    <div class="users-container">
                        <div class="users-header">
                            <h2>用户管理</h2>
                            <button class="btn btn-primary" id="add-user-btn">
                                ➕ 添加用户
                            </button>
                        </div>
                        
                        <div class="users-list" id="users-list">
                            <!-- 用户列表将在这里显示 -->
                        </div>
                    </div>
                </section>

                <!-- 系统设置 -->
                <section id="settings-tab" class="tab-content">
                    <div class="settings-container">
                        <h2>系统设置</h2>
                        
                        <div class="settings-sections">
                            <!-- Gitee配置 -->
                            <div class="settings-section">
                                <h3>🔗 Gitee 配置</h3>
                                <div class="form-group">
                                    <label for="gitee-token">Access Token</label>
                                    <input type="password" id="gitee-token" placeholder="输入你的Gitee Access Token">
                                    <small>在 Gitee 设置 > 私人令牌 中生成</small>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="gitee-owner">用户名/组织</label>
                                        <input type="text" id="gitee-owner" placeholder="Rovinty">
                                    </div>
                                    <div class="form-group">
                                        <label for="gitee-repo">仓库名</label>
                                        <input type="text" id="gitee-repo" placeholder="task-track">
                                    </div>
                                </div>
                                <button class="btn btn-primary" id="test-gitee-connection">测试连接</button>
                            </div>
                            
                            <!-- 数据管理 -->
                            <div class="settings-section">
                                <h3>💾 数据管理</h3>
                                <div class="data-actions">
                                    <button class="btn btn-secondary" id="export-data">导出数据</button>
                                    <button class="btn btn-secondary" id="import-data">导入数据</button>
                                    <input type="file" id="import-file" accept=".json" style="display: none;">
                                    <button class="btn btn-warning" id="clear-local-data">清空本地数据</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>

        <!-- 快速添加任务模态框 -->
        <div id="quick-add-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="quick-add-title">添加任务</h3>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="quick-add-form" class="quick-add-form">
                        <div class="form-group">
                            <label for="quick-title">任务标题 *</label>
                            <input type="text" id="quick-title" name="title" required>
                        </div>
                        <div class="form-group">
                            <label for="quick-description">任务描述</label>
                            <textarea id="quick-description" name="description" rows="3"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="quick-type">需求类型 *</label>
                                <select id="quick-type" name="demandType" required>
                                    <option value="">请选择类型</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="quick-deadline">截止时间</label>
                                <input type="date" id="quick-deadline" name="deadline">
                            </div>
                        </div>
                        <input type="hidden" id="quick-status" name="status">
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">创建任务</button>
                            <button type="button" class="btn btn-secondary modal-close">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 需求详情模态框 -->
        <div id="demand-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="modal-title">需求详情</h3>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body" id="modal-body">
                    <!-- 需求详情内容 -->
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary modal-close">关闭</button>
                    <button class="btn btn-primary" id="edit-demand-btn">编辑</button>
                </div>
            </div>
        </div>

        <!-- 用户管理模态框 -->
        <div id="user-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="user-modal-title">添加用户</h3>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="user-form" class="user-form">
                        <div class="form-group">
                            <label for="user-username">用户名 *</label>
                            <input type="text" id="user-username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="user-password">密码 *</label>
                            <input type="password" id="user-password" name="password" required>
                        </div>
                        <div class="form-group">
                            <label for="user-name">姓名 *</label>
                            <input type="text" id="user-name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="user-email">邮箱</label>
                            <input type="email" id="user-email" name="email">
                        </div>
                        <div class="form-group">
                            <label for="user-roles">角色</label>
                            <select id="user-roles" name="roles" multiple>
                                <option value="管理员">管理员</option>
                                <option value="产品评估">产品评估</option>
                                <option value="计划制定">计划制定</option>
                                <option value="执行跟进">执行跟进</option>
                            </select>
                        </div>
                        <input type="hidden" id="user-id" name="id">
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">保存用户</button>
                            <button type="button" class="btn btn-secondary modal-close">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 流程配置模态框 -->
        <div id="workflow-modal" class="modal">
            <div class="modal-content large">
                <div class="modal-header">
                    <h3 id="workflow-modal-title">配置流程</h3>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="workflow-form" class="workflow-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="workflow-name">流程名称 *</label>
                                <input type="text" id="workflow-name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="workflow-type">关联需求类型 *</label>
                                <select id="workflow-type" name="demandType" required>
                                    <option value="">请选择需求类型</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="workflow-description">流程描述</label>
                            <textarea id="workflow-description" name="description" rows="3"></textarea>
                        </div>
                        
                        <div class="workflow-nodes-config">
                            <div class="nodes-header">
                                <h4>流程节点</h4>
                                <button type="button" class="btn btn-sm btn-primary" id="add-node-btn">+ 添加节点</button>
                            </div>
                            <div id="workflow-nodes-list" class="workflow-nodes-list">
                                <!-- 动态生成节点配置 -->
                            </div>
                        </div>
                        
                        <input type="hidden" id="workflow-id" name="id">
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">保存流程</button>
                            <button type="button" class="btn btn-secondary modal-close">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 加载提示 -->
        <div id="loading" class="loading">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载...</div>
        </div>

        <!-- 消息提示 -->
        <div id="message-container" class="message-container">
            <!-- 消息将在这里显示 -->
        </div>
    </div>

    <!-- JavaScript -->
    <script src="js/gitee-api.js"></script>
    <script src="js/data-manager.js"></script>
    <script src="js/workflow-engine.js"></script>
    <script src="js/components/demand-card.js"></script>
    <script src="js/components/workflow-preview.js"></script>
    <script src="js/app.js"></script>
</body>
</html>